﻿@{
    ViewBag.Title = "Context";
}

<script>
    function ContextController($scope) {
        var self = $scope;

        self.context = {
            projects: [
            {
                id: 0,
                name: 'Project 1',
                participants: ['yuriy.shapovalov'],
                tasks: [
                    { id: 0, timer: 0, name: 'Investigation', project: 'Project 1', type: 'timebox', status: 'active', time: new Date(0, 0, 0, 0, 20, 9), assignedTo: 'yuriy.shapovalov', },
                    { id: 2, timer: 2, name: 'Implementation', project: 'Project 1', type: 'permanent', status: 'stopped', time: new Date(0, 0, 0, 0, 0, 56), assignedTo: 'yuriy.shapovalov', }
                ]
            },
            {
                id: 1,
                name: 'Research',
                participants: ['yuriy.shapovalov'],
                tasks: [
                    { id: 1, timer: 1, name: 'Project 1. Investigation', project: 'Research', type: 'workitem', status: 'stopped', time: new Date(0, 0, 0, 1, 12, 28), assignedTo: 'yuriy.shapovalov', }
                ]
            },
            {
                id: 2,
                name: 'Work',
                participants: ['yuriy.shapovalov'],
                tasks: [
                    { id: 1, timer: 1, name: 'Project 1. Investigation', project: 'Research', type: 'workitem', status: 'stopped', time: new Date(0, 0, 0, 1, 12, 28), assignedTo: 'yuriy.shapovalov', }
                ]
            }
            ]
        };

        self.records = [
            { id: 0, timer: 0, name: 'Investigation', project: 'Project 1', type: 'timebox', status: 'active', time: new Date(0, 0, 0, 0, 20, 9), assignedTo: 'yuriy.shapovalov', },
            { id: 1, timer: 1, name: 'Project 1. Investigation', project: 'Research', type: 'workitem', status: 'stopped', time: new Date(0, 0, 0, 1, 12, 28), assignedTo: 'yuriy.shapovalov', },
            { id: 2, timer: 2, name: 'Implementation', project: 'Project 1', type: 'permanent', status: 'stopped', time: new Date(0, 0, 0, 0, 0, 56), assignedTo: 'yuriy.shapovalov', },
        ];

        self.projects = [
            {
                id: 0,
                name: 'Project 1',
                participants: ['yuriy.shapovalov'],
                tasks: [
                    { id: 0, timer: 0, name: 'Investigation', project: 'Project 1', type: 'timebox', status: 'active', time: new Date(0, 0, 0, 0, 20, 9), assignedTo: 'yuriy.shapovalov', },
                    { id: 2, timer: 2, name: 'Implementation', project: 'Project 1', type: 'permanent', status: 'stopped', time: new Date(0, 0, 0, 0, 0, 56), assignedTo: 'yuriy.shapovalov', }
                ]
            },
            {
                id: 1,
                name: 'Research',
                participants: ['yuriy.shapovalov'],
                tasks: [
                    { id: 1, timer: 1, name: 'Project 1. Investigation', project: 'Research', type: 'workitem', status: 'stopped', time: new Date(0, 0, 0, 1, 12, 28), assignedTo: 'yuriy.shapovalov', }
                ]
            },
            {
                id: 2,
                name: 'Work',
                participants: ['yuriy.shapovalov'],
                tasks: [
                    { id: 1, timer: 1, name: 'Project 1. Investigation', project: 'Research', type: 'workitem', status: 'stopped', time: new Date(0, 0, 0, 1, 12, 28), assignedTo: 'yuriy.shapovalov', }
                ]
            }
        ];

        self.toggleActivity = function (id, status) {
            for (record in self.records) {
                if (self.records[record].id == id) {
                    var item = self.records[record];
                    if (item.status == 'stopped') {
                        startTimer(self.records[record]);
                    }
                    else {
                        stopTimer(self.records[record]);
                    }
                }
            }
        }

        var startTimer = function (record) {
            for (var rec in self.records) {
                if (self.records[rec].id == record.id) {
                    self.records[rec].status = 'active';
                    var closured_rec = rec;
                    self.records[closured_rec].timer = setInterval(function () {
                        console.log(self.records[closured_rec].time);
                        var sec = self.records[closured_rec].time.getSeconds();
                        self.records[closured_rec].time.setSeconds(sec + 1);
                        $scope.$apply();
                    }, 1000);
                }
                else {
                    clearInterval(self.records[rec].timer);
                    self.records[rec].status = 'stopped';
                }
            }
        }

        var stopTimer = function (record) {
            clearInterval(record.timer);
            record.status = 'stopped';
        }
    }
    angular.module('TimeTracker', []);
</script>

<style>
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        padding: 0;    
    }

    .left-panel {
        background-color: #fefefe;
        float: left;
        width: 180px;
        margin-right: 10px;
    }

    .right-panel {
        background-color: #b9b9b9;
        float: right;
        width: 230px;
    }

    .main-panel {
        background-color: #fefefe;
        float: left;
        width: 530px;
        height: 400px;
    }
        .main-panel > ul {
            padding: 0;
        }

    .main-content {
        padding-top: 50px;
    }

    .record {
        list-style: none;
        height: 40px;
        margin: 0 0 5px 0px;
        background-color: #b6ff00;
        padding: 5px 8px;
        position: relative;
    }

    .record-name {
        text-decoration: underline;
    }
    .record-project {
        font: normal 7pt Verdana;
        background: #ffd800;
        padding: 1px 4px;
    }
    .record-time {
        position: absolute;
        float: right;
        top: 10px;
        right: 100px;
        font: bold 12pt Verdana;
        color: #3e3e3e;
        -webkit-text-shadow: 5px 5px 10px #191919;
        text-shadow: 5px 5px 10px #191919;
    }


    .control {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .control-active {
        content:url('~/Images/Pause.png');
    }

    .control-stopped {
        content:url('~/Images/Play.png');
    }

    .project {
        margin: 0px 2px 6px 2px;
        padding: 0px;
        background-color: #b1a0a4;
        list-style: none;
    }
        .project > h3 {
            font: normal 11pt Verdana;
            color: #191919;
            margin: 0px;
            padding: 2px 0px 2px 8px;
            background-color: #ffd800;
        }

        .project > li {
            margin: 1px 0px 0px 4px;
            list-style: none;
            background: #a8fc5d;
            border: 1px solid #3e3e3e;
            box-sizing: border-box;
        }
</style>

<section ng-controller="ContextController">
    
    <aside class="left-panel">&nbsp;</aside>

    <section class="main-panel">
        <ul>
            <li ng-repeat="project in context.projects" class="project">
                <h3>{{project.name}}</h3>
                <ul>
                    <li class="record" ng-repeat="task in project.tasks" ng-switch on="task.status">
                        <h3 class="record-name">{{task.name}}</h3>

                        <div class="record-time">{{task.time| date:'H:mm:ss'}}</div>
                
                        <img class="control" ng-switch-when='active' src="~/Images/Pause.png" ng-click="toggleActivity(task.id, task.status)"/>
                        <img class="control" ng-switch-when='stopped' src="~/Images/Play.png" ng-click="toggleActivity(task.id, task.status)"/>
                    </li>
                </ul>
            </li>
        </ul>
    <!--    <ul>
            <li class="record" ng-repeat="record in records" ng-switch on="record.status" draggable="true">
                <h3 class="record-name">{{record.name}}</h3>
                <span class="record-project">[{{record.project}}]</span>
                
                <div class="record-time">{{record.time| date:'H:mm:ss'}}</div>
                <div>{{record.assignedTo}}</div>
                
                <img class="control" ng-switch-when='active' src="~/Images/Pause.png" ng-click="toggleActivity(record.id, record.status)"/>
                <img class="control" ng-switch-when='stopped' src="~/Images/Play.png" ng-click="toggleActivity(record.id, record.status)"/>
            </li>
        </ul> -->
    </section>

    <aside class="right-panel">
        <ul ng-repeat="project in projects" class="project">
            <h3>{{project.name}}</h3>
            <li ng-repeat="task in project.tasks" draggable="true">
                {{task.name}}
            </li>
        </ul>
    </aside>

</section>